<script setup>
import { ref, onMounted } from "vue";
import { queryAllDepts, addDept, getDeptById, editDept, deleteDept } from "@/api/dept";
import { ElMessage, ElMessageBox } from 'element-plus'

//定义数据：先准备一些假数据，从API接口文档里得到的
const tableData = ref([]);
const dialogFormVisible = ref(false);
const dialogTitle = ref("新增部门");
const form = ref({
  name: ""
});
const formRules = ref({
  name: [
    { required: true, message: '请输入部门名称', trigger: 'blur' },
    { min: 3, max: 20, message: '最少3个字符，最多20个字符', trigger: 'blur' },
  ]
});
const deptFormRef = ref(null);

// 从后端加载部门列表数据。真实前端开发，会搭建模拟Mock服务
async function search(){
  //利用对axios包装后的request对象发请求：不需要加/api开头了；得到响应：得到的是响应的正文内容
  const result = await queryAllDepts();
  if (result.code==1) {
    tableData.value = result.data;
  }else{
    ElMessage.error('查询列表失败');
  }
}

// 编辑按钮的处理
const handleEdit = async (index, row) => {
  const result = await getDeptById(row.id);
  if (result.code==1) {
    //将查询到的部门对象数据，设置给dialog内的表单了
    form.value = result.data;
    dialogFormVisible.value = true;
    dialogTitle.value = "修改部门";
  }
}
// 删除按钮的处理
const handleDelete = (index, row) => {
  //先弹出确认窗口，给用户一个警告确认
  ElMessageBox.confirm('此操作将永久删除该部门, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    //用户点击确定，发请求，删除数据
    const result = await deleteDept(row.id);
    if (result.code==1) {
      ElMessage.success('删除成功');
      search();
    }
  })
}

// 新增按钮的弹窗逻辑
function showAddWin(){
  dialogFormVisible.value = true;
  form.value = { name: "" };
  dialogTitle.value = "新增部门";
}

// 保存部门的处理逻辑
function save(){
  //提前进行表单校验，如果校验不通过，那么不允许提交表单
  deptFormRef.value.validate(async valid=>{
    if(!valid){
      return;
    }

    let result;
    //向后端发请求，需要判断是新增还是修改，判断条件是：form.value里有没有id。有id是修改，没有id是新增
    //js中if(条件) 其中的条件可以是任意类型的数据。如果数据不存在(undefined)或者值为null 或者是数字0 判断结果都是false
    if (form.value.id) {
      //id值存在，要执行修改
      result = await editDept(form.value);
    }else{
      result = await addDept(form.value);
    }
    if (result.code==1) {
      ElMessage.success("保存成功");
      dialogFormVisible.value = false;
      search();
    }else{
      ElMessage.error("保存失败");
    }
  });
}

// 钩子函数onMounted
onMounted(() => {
  search();
})
</script>

<template>
  <el-button type="primary" @click="showAddWin">
    新增部门
  </el-button>
  <el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="500">
    <el-form :model="form" :rules="formRules" ref="deptFormRef">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" type="index" label="序号" width="180" />
    <el-table-column prop="name" label="部门名称" width="180" />
    <el-table-column prop="updateTime" label="最后操作时间" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          编辑
        </el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped></style>
